<template>
    <div>
        <div class="tab" style="display: flex;justify-content: space-around;margin-top: 30px">
            <div style="display: flex;align-items: center">
                <div>选择14场期号</div>
                <el-select style="margin: 0 10px ;" v-model="issue" placeholder="选择14场期号" @change="handleChange">
                    <el-option v-for="item in issueData" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
        </div>


        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            <el-table-column prop="issue" label="期号" align="center">
            </el-table-column>
            <el-table-column prop="comp_name" label="联赛" align="center">
            </el-table-column>
            <el-table-column prop="home_all_name" label="主队" align="center">
            </el-table-column>
            <el-table-column prop="away_all_name" label="客队" align="center">
            </el-table-column>
            <el-table-column prop="hq_name" label="火球主队名称" align="center">
                <template slot-scope="scope">
                    <input type="text" v-model="hq_name" v-show="tabIndex == scope.$index &&iseditor" />
                    <span v-show="!iseditor">{{scope.row.hq_name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="hq_id" label="火球主队ID" align="center">

            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="handleButton1Click(scope.$index)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleButton2Click(scope.row)">保存</el-button>
                    <div style="width: 100%;">
                        <el-button type="text" @click="modifyTap(scope.row)">如延期或中断，请点击</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <!-- <el-dialog title="赛事延期或中断修改" :visible.sync="dialogTableVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="礼物名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog> -->
    </div>
</template>

<script>
import axios from "axios";
import {fourteenIssueList,fourteenMatchList,fourteenSetHqName,modifyData } from '../../../libs/api'
export default {
    data() {
        return {
            issue:'',
            fourteen: [],
            tableData: [],
            issueData:[],
            iseditor:false,
            tabIndex:'',
            hq_name:'',
            matchID:''
        }
    },
    mounted() {
        this.getFourteenIssueList()
    },
    methods: {
        modifyTap(e){
            console.log(e)
            this.matchID = e.hq_id
            this.$confirm('是否因为该场赛事延期或中断执行红黑？！','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                this.getModify()
                this.$message({
                    type:'info',
                    message:'执行成功'
                })
            }).catch(()=>{
                this.$message({
                    type:'info',
                    message:'取消执行'
                })
            })
        },
        async getModify(){
            await axios.get('https://api.zctj16888.com/admin/v1/Execute/fourteen',{params:{match_id:this.matchID}}).then(res=>{
                console.log(res)
            })
            // modifyData({
            //     match_id:this.matchID
            // }).then(res => {
            //     console.log(res)
            // })
        },
        handleButton1Click(e){
            console.log(e)
            this.tabIndex = e
            this.iseditor=true
        },
        handleButton2Click(e){
            this.hq_id = e.id
            this.iseditor=false
            this.getFourteenSetHqName()
            this.hq_name = ''
        },
        handleChange(value) {
            this.issue = value
            this.tabIndex = ''
            this.getFourteenMatchList()
            console.log(value)
        },
        getFourteenMatchList() {
            fourteenMatchList({
                page:1,
                limit:20,
                issue:this.issue
            }).then(res => {
                this.tableData=res.data.list
                console.log(this.tableData)
            })
        },
        getFourteenSetHqName() {
            fourteenSetHqName({
                id:this.hq_id,
                hq_name:this.hq_name
            }).then(res => {
                console.log(res)
                this.getFourteenMatchList()
            })
        },
        getFourteenIssueList() {
            fourteenIssueList({
                
            }).then(res => {
                this.issueData=res.data
                console.log(res)
            })
        },
    }
}
</script>

<style>
.item1 {
    background-color: #3C9CFF;
    color: #fff;
}

.box {
    display: flex;

}

.fourteenClass {
    width: 300px;
}

.fourteenClass_a {
    width: 80px;
    border: 1px solid #aaa;
    text-align: center;
    line-height: 38px;
}

.fourteenClass_a:nth-child(2) {
    border-left: none;
    border-right: none;
}
</style>